<template>
  <div class="all-account" v-loading="loading">
    <div class="input-box">
        <el-input
            placeholder="搜索趣ID、QQ号、游戏昵称"
            @keyup.enter.native="selectChange"
            style="width:240px;"
            clearable
            v-model.trim="keyWord">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <span class="input-title">类型</span>
        <el-select v-model="modeType" placeholder="请选择" @change="modeStatusChange">
          <el-option
            v-for="item in modeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->
        <span class="input-title">账号状态</span>
        <el-select style="margin-left: 10px" v-model="manageType" placeholder="请选择" @change="statusChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="input-title">游戏</span>
        <el-select v-model="gameType" placeholder="请选择" @change="gameStatusChange">
          <el-option
            v-for="item in gameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- 添加平台 -->
        <span class="input-title">平台</span>
        <el-select v-model="areaType" placeholder="请选择" @change="typeStatusChange">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
    </div>
    <div class="input-box" style="position: relative;">
      <!-- 托管日期 -->
        <span class="input-title" style="margin-left: 10px;">托管日期</span>
            <el-date-picker
                @change="getList(1)"
                style="width: 300px;"
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>
        <el-button class="btn" style="margin-left:20px" @click="reset">重置</el-button>
        <!-- <el-button type="success" class="btn" style="position: absolute; right: 10px" @click="exportData">导出</el-button> -->
    </div>
    <div class="table-box">
      <el-table :data="tableData" ref="table" border style="width: 100%" @sort-change="sortChange">
          <el-table-column prop="accountNo" width="200" label="账号">
            <template slot-scope="scope">
              <div class="table-btn" @click="goDetail(scope.row)">QQ：{{ scope.row.accountNo }}</div>
              <div>{{ scope.row.areaType === 1 ? '安卓' : scope.row.areaType === 2 ? 'IOS' : '-' }}<span>-{{ scope.row.serverName }}</span></div>
              <div v-if="scope.row.accountBlackDesc" style="color: red"> {{ scope.row.accountBlackDesc }}</div>
            </template>
          </el-table-column>
          <el-table-column width="120" prop="gameName" label="游戏"></el-table-column>

          <el-table-column width="120" prop="userId" label="号主">
            <template slot-scope="scope">
              <div class="table-btn" @click="goUserInfo(scope.row.userId)">
                {{ scope.row.userId }}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="120" prop="worth" label="估值" sortable="custom"></el-table-column>
          <el-table-column width="120" prop="price" label="售价" sortable="custom"></el-table-column>

          <el-table-column width="120" prop="userId" label="是否在保">
            <template slot-scope="scope">
              <div class="table-btn">
                <span :style="{ 'color': scope.row.insured === 1 ? 'rgb(103, 194, 58)' : '#333'}">{{ scope.row.insured === 1 ? '是' : '否' }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column width="200" prop="propNum" label="封面">
            <template slot-scope="scope">
                <div class="ganda">
                  <template v-for="(item, index) in scope.row.picList">
                    <div v-if="index < 4" class="ganda-pic" :key="index">
                      <el-image
                        @click="showImgList(scope.row.picList)"
                        :src="item.url"
                        :preview-src-list="srcList">
                      </el-image>
                    </div>
                  </template>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="描述" width="200"></el-table-column>
          <el-table-column width="160" label="咨询过的用户数" prop="findAdviserUserCount"></el-table-column>
          <el-table-column width="160" label="未付款的次数" prop="noApplyCount"></el-table-column>
          <el-table-column width="160" label="付款的次数" prop="applyUserCount"></el-table-column>
          <el-table-column width="160" label="号主的活跃天数" prop="accountActiveDay"></el-table-column>
          <el-table-column width="200" prop="selectStatus" label="状态" fixed="right">
            <template slot-scope="scope">
                <div>
                  <p v-if="statusMap[scope.row.selectStatus + '']" :style="{color: statusMap[scope.row.selectStatus + ''].color}">{{statusMap[scope.row.selectStatus + ''].name}}</p>
                  <p>{{scope.row.dealServeType ? '(顾问模式)' : '(普通模式)'}}</p>
                </div>
            </template>
          </el-table-column>
          <el-table-column width="180" label="托管时间" fixed="right">
            <template slot-scope="scope">
                <span>{{ _formatDate(scope.row.manageTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                  <div>
                    <el-button style="margin-left: 10px;" @click="goDetail(scope.row)" type="text" size="small">查看详情</el-button>
                    <el-button @click="copyAccountNo(scope.row.accountCopyUrl)" type="text" size="small">复制账号链接</el-button>
                  </div>
                  <!-- <div v-if="scope.row.status === 1">
                      <p><el-button style="margin-left: 10px;color:#67C23A;" @click="setAuditStatus(scope, 2)" type="text" size="small">通过</el-button></p>
                      <p><el-button style="margin-left: 10px;color:red;" @click="openDialog(scope, -1)" type="text" size="small">拒绝</el-button></p>
                  </div> -->
              </template>
          </el-table-column>
      </el-table>
    </div>

    <div class="tools">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="_pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog
        class="dialog-box"
        title="拒绝理由:"
        :visible.sync="dialogVisible"
        width="500px">
        <div>
            <el-input type="textarea" maxlength="200" rows="3" show-word-limit v-model.trim="remark"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setAuditStatus('', status)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

const optionArr = [
          {
            value: 100,
            label: '全部'
          },
          {
            value: 0,
            label: '待提交'
          },
          {
            value: 1,
            label: '待审核'
          },
          {
            value: 2,
            label: '待上架'
          },
          {
            value: 3,
            label: '已上架'
          },
          {
            value: 4,
            label: '交易中'
          },
          {
            value: 5,
            label: '已售出'
          },
          {
            value: -1,
            label: '审核拒绝'
          },
          {
            value: -2,
            label: '客服下架'
          }
        ]

const statusMap = {
  '0': {
    name: '待提交'
  },
  '1': {
    name: '待审核'
  },
  '2': {
    name: '待上架'
  },
  '3': {
    name: '已上架',
    color: '#67C23A'
  },
  '4': {
    name: '交易中'
  },
  '5': {
    name: '已售出'
  },
  '-1': {
    name: '审核拒绝',
    color: '#F56C6C'
  },
  '-2': {
    name: '客服下架',
    color: '#F56C6C'
  }
}
export default {
  data () {
    return {
      statusMap,
      date: [], // 时间
      loading: false,
      dialogVisible: false,
      remark: '',
      keyWord: '',
      modeType: 100,
      modeOptions: [
        {
          value: 100,
          label: '全部'
        },
        {
          value: 0,
          label: '普通模式'
        },
        {
          value: 1,
          label: '顾问模式'
        }
      ],
      gameType: 0,
      manageType: 100,
      options: optionArr.slice(0),
      gameOptions: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '王者荣耀'
        },
        {
          value: 2,
          label: '和平精英'
        }
      ],
      areaType: 0,
      typeOptions: [ //平台选择字段
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '安卓'
        },
        {
          value: 2,
          label: 'IOS'
        }
      ],
      tableData: [],
      srcList: [],
      pageNum: 1,
      pageSize: 10,
      total: 12,
      dataId: '',
      status: '',
      current: 0,
      type: '',
      order: '',
    }
  },
  watch: {
    modeType: {
      handler(val) {
        if (val !== 100) {
          // this.manageType = 100
          this.getList(1)
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 后端排序
    sortChange ({ column, prop, order }) {
        this.sort = order || ''
        // 如果没有 sort prop 置为空
        if (!this.sort) {
            this.type = null
        } else {
            if (this.sort === 'ascending') {
                this.sort = 'asc'
            } else {
                this.sort = 'desc'
            }
            this.type = prop
        }
        this.getList(1)
    },
    exportData() {
      this.columns = [{
          title: '账号', key: 'accountNoDesc'
      },
      {
          title: '游戏', key: 'gameName'
      },
      {
          title: '号主', key: 'userId'
      },
      {
          title: '估值', key: 'worth'
      },
      {
          title: '售价（元）', key: 'price'
      },
      {
          title: '封面', key: 'picUrl'
      },
      {
          title: '描述', key: 'title'
      },
      {
          title: '咨询过的用户数', key: 'findAdviserUserCount'
      },
      {
          title: '未付款的次数', key: 'noApplyCount'
      },
      {
          title: '付款的次数', key: 'applyUserCount'
      },
      {
          title: '号主的活跃天数', key: 'accountActiveDay'
      },
      {
          title: '状态', key: 'selectStatusDesc'
      },
      {
          title: '托管时间', key: 'manageTimeDesc'
      }
      ]
      this.getList(1, true)
  },
    modeStatusChange (type) {
      this.modeType = type
      // 如果 模式是全部 则状态也是 100
      // this.options = optionArr.slice()
      // // 如果是普通的 则 不展示待审核等选项
      // if (type === 0) {
      //     this.options = this.options.filter((item) => (item.value !== -1 && item.value !== 1))
      // }
      // this.manageType = 100
      this.getList(1)
    },
    goUserInfo (id) {
        const { href } = this.$router.resolve({
            path: '/dataReport/userInfo',
            query: {
                id
            }
        })
        window.open(href, '_blank')
    },
    // 复制账号链接
    copyAccountNo (orderNo) {
      const aux = document.createElement('textarea')
      aux.innerHTML = orderNo
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      this.$message.success('复制成功')
    },
    reset() {
      this.pageNum = 1
      this.manageType = 100
      this.keyWord = ''
      this.gameType = 0
      this.areaType = 0
      this.modeType = 100
      this.date = []
      this.getList(1)
    },
    async getList (pageNum, flag) {
      if (this.loading) return
      this.pageNum = pageNum
      this.loading = true
      let params = {
          pageNum: pageNum,
          pageSize: this.pageSize,
          selectStatus: this.manageType,
          gameType: this.gameType,
          areaType: this.areaType,
          selectType: 1,
          serveType: this.modeType,
      }
      params.orderType = this.type
      params.sortType = this.sort
      // 导出数据
      if (flag) {
        params.pageSize = 1000000
      }
      if (this.keyWord) params.keyWord = this.keyWord
      if (this.date && this.date.length) {
          params.startTime = this.date[0]
          params.endTime = this.date[1]
      }
      params = Object.assign(params, this.paramsList)
      let res = await this.$http.get('/deal/selectDealAccountManageList', {
          params
      })
      if (res.code === '0') {
          if (flag) {
            res.data.list && res.data.list.forEach((item) => {
                item.accountNoDesc = `QQ: ${item.accountNo} - 区服：${item.areaType === 1 ? '安卓' : item.areaType === 2 ? 'IOS' : '-'} ${item.serverName}`
                item.manageTimeDesc = this._formatDate(item.manageTime)
                item.picUrl = ''
                let arr= []
                item.picList && item.picList.forEach((item) => {
                  arr.push(item.url)
                })
                item.picUrl = arr.join(',')
                if (item.selectStatus === 0) {
                  item.selectStatusDesc = '待提交'
                  if (item.dealServeType) {
                    item.selectStatusDesc = `待提交-(顾问模式)`
                  }
                }
                if (item.selectStatus === 1 && item.dealServeType) {
                  item.selectStatusDesc = `待审核-(顾问模式)`
                }
                if (item.selectStatus === 2) {
                  item.selectStatusDesc = '待上架'
                  if (item.dealServeType) {
                    item.selectStatusDesc = `待上架-(顾问模式)`
                  }
                }
                if (item.selectStatus === 3) {
                  item.selectStatusDesc = '已上架'
                  if (item.dealServeType) {
                    item.selectStatusDesc = `已上架-(顾问模式)`
                  }
                }
                if (item.selectStatus === 4) {
                  item.selectStatusDesc = '交易中'
                  if (item.dealServeType) {
                    item.selectStatusDesc = `交易中-(顾问模式)`
                  }
                }
                if (item.selectStatus === 5) {
                  item.selectStatusDesc = '已售出'
                  if (item.dealServeType) {
                    item.selectStatusDesc = `已售出-(顾问模式)`
                  }
                }
                if (item.selectStatus === -2) {
                  item.selectStatusDesc = '已注销'
                  if (item.dealServeType) {
                    item.selectStatusDesc = `已注销-(顾问模式)`
                  }
                }
                if (item.selectStatus === -1 && item.dealServeType) {
                  item.selectStatusDesc = `审核拒绝-(顾问模式)`
                }
            })
            let title = '普通模式-账号列表'
            if (this.modeType === 1) {
              title = '顾问模式-账号列表'
            }
            export2Excel(this.columns, res.data.list, title)
          } else {
            this.tableData = res.data.list
            this.total = res.count
          }
      } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
      }
      this.loading = false
    },
    selectChange () {
        this.manageType = 100
        this.gameType = 0
        this.getList(1)
    },
    statusChange (manageType) {
      this.manageType = manageType
      this.getList(1)
    },
    gameStatusChange (gameType) {
      this.gameType = gameType
      this.getList(1)
    },
    typeStatusChange (areaType) {
      this.areaType = areaType
      this.getList(1)
    },
    // 通过
    setAuditStatus (scope, status) {
        if (scope) {
          this.dataId = scope.row.dataId
          this.current = scope.$index
          this.status = status
        }
        let data = {
          dataId: this.dataId,
          operateStatus: status
        }
        if (this.remark) {
          data.remark = this.remark
        }
        this.$http.post('/deal/operateDealStatus', data).then(res => {
          if (res.code === '0') {
            this.dialogVisible = false
            this.remark = ''
            this.$set(this.tableData[this.current], 'status', this.status)
          } else {
            this.$message({
                type: 'error',
                message: res.desc
            })
          }
        })
    },
    // 展示拒绝弹框
    openDialog (scope, status) {
        this.dialogVisible = true
        this.dataId = scope.row.dataId
        this.current = scope.$index
        this.status = status
    },
    showImgList (imgList) {
        let imgArr = []
        imgList.forEach(item => {
          imgArr.push(item.url)
        })
        this.srcList = imgArr
    },
    goDetail ({ dataId, status, gameId, selectStatus }) {
      // 如果是和平精英 并且状态是 待审核状态
      // if (gameId === 1106467070 && selectStatus === 1) {
      //   const { href } = this.$router.resolve({
      //       path: '/hpjy/accDetail',
      //       query: {
      //           dataId,
      //           auditId
      //       }
      //   })
      //   window.open(href, '_blank')
      //   return
      // }
      const { href } = this.$router.resolve({ path: '/seller/accTradingDetail', query: { dataId, status, type: 0 } })
      window.open(href, '_blank')
    },
    // 页码切换
    sizeChange (val) {
          this.pageNum = 1
          this.pageSize = val
          this.getList(1)
    },
    // 页容切换
    pageChange (val) {
        this.pageNum = val
        this.getList(this.pageNum)
    },
    _formatDate (timestamp) {
        return formatDate(timestamp, 'YYYY-MM-DD HH:MM')
    }
  }
}
</script>
<style lang="scss" scoped>
.table-box{
  margin-top: 20px;
  .ganda{
    display: flex;
    .ganda-pic{
      width: 80px;
      margin: 0 5px;
      img{
        width: 100%;
      }
    }
  }
}
.input-box {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    .input-title {
        margin: 0 10px 0 20px;
    }
    .btn {
        margin-top: 10px;
        margin-left: 10px;
    }
}
.table-btn{
  cursor: pointer;
  color: #409eff;
  font-size: 13px;
  font-weight: 500;
  &:hover{
    text-decoration: underline;
  }
}
.tools {
  margin-top: 10px;
}
</style>
